<!--
 * @Author: ruins
 * @Date: 2022-01-17 08:56:33
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-17 08:56:36
 * @FilePath: \white-dragon\src\views\Resume\index.vue
-->
<template>
  <div id="resume">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <strong><span>个人信息</span></strong>
        <el-button
          style="float: right; vertical-align: middle;"
          type="primary"
          icon="el-icon-download"
          size="small"
          @click="getPdf('resume','个人简历')"
        >
          导出PDF
        </el-button>
      </div>
      <!-- 表单区域 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        style="padding: 10px 0;"
        label-position="top"
      >
        <el-row>
          <!-- 左边区域 -->
          <el-col :span="12">
            <el-form-item
              label="姓名"
              prop="name"
            >
              <el-col :span="18">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入您的姓名"
                >
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              label="期望职位"
              prop="expectJob"
            >
              <el-select
                v-model="ruleForm.expectJob"
                placeholder="请选择期望职位"
                @focus="getJob"
              >
                <el-option
                  v-for="item of jobList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="参加工作日期"
              prop="workingDate"
            >
              <el-date-picker
                v-model="ruleForm.workingDate"
                type="date"
                placeholder="选择日期"
                style="cursor: pointer;"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="邮箱"
              prop="mailbox"
            >
              <el-col :span="18">
                <el-input
                  v-model="ruleForm.mailbox"
                  placeholder="请输入您的邮箱"
                >
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              label="微信号"
              prop="wechatNumber"
            >
              <el-col :span="18">
                <el-input
                  v-model="ruleForm.wechatNumber"
                  placeholder="请输入您的微信号"
                >
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              label="薪资要求"
              prop="salaryRequirements"
            >
              <el-col :span="5">
                <el-select
                  v-model="ruleForm.salaryRequirements"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item of arr"
                    :key="item.id"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col
                class="line"
                :span="3"
              >
                至
              </el-col>
              <el-select
                v-model="ruleForm.salaryRequirement"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in arr1"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 右边区域 -->
          <el-col :span="12">
            <!-- 头像 -->
            <ImageUpload ref="ImageUpload" />
            <el-form-item
              label="性别"
              prop="gender"
            >
              <el-col :span="18">
                <!-- <el-input
                  v-model="ruleForm.gender"
                  placeholder="请输入您的性别"
                >
                </el-input> -->
                <el-select
                  v-model="ruleForm.gender"
                  placeholder="请选择您的性别"
                >
                  <el-option
                    v-for="item in choiceGender.choiceGender"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item
              label="生日"
              prop="birthday"
            >
              <el-date-picker
                v-model="ruleForm.birthday"
                type="date"
                placeholder="选择日期"
                style="cursor: pointer;"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="电话"
              prop="mobile"
            >
              <el-col :span="18">
                <el-input
                  v-model="ruleForm.mobile"
                  placeholder="请输入您的手机号"
                >
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              label="期望工作城市"
              prop="expectCity"
            >
              <el-select
                v-model="ruleForm.expectCity"
                placeholder="请选择期望工作城市"
                @focus="getHotcity"
              >
                <el-option
                  v-for="item in hotcityList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <h3 class="title">个人优势</h3>
        <div class="input-wrap input-wrap-textarea">
          <el-form-item prop="personalAdvantage">
            <el-input
              type="textarea"
              v-model="ruleForm.personalAdvantage"
              maxlength="500"
            >
            </el-input>
            <span class="suffix-counter">
              <em>{{ this.digitChange }}</em>
              /500
            </span>
          </el-form-item>
        </div>
        <!-- 模块部分 -->
        <AddModule></AddModule>
        <el-form-item>
          <el-row
            type="flex"
            align="center"
            justify="center"
          >
            <el-col :span="8">
              <el-button
                type="primary"
                @click="preserve"
              >
                保存
              </el-button>
              <el-button>取消</el-button>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>

    </el-card>
  </div>

</template>

<script>
import AddModule from './components/AddModule.vue'
import { isEmail } from '@/utils/validate'
import choiceGender from '@/api/constant/user'
import {
  getJob,
  getHotcity,
  updateUser,
  getUser,
  updateUserData
} from '@/api/Job'
export default {
  name: 'Resume',
  props: {},
  data () {
    // 校验邮箱
    const validatorRmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式不正确'))
      }
      callback()
    }
    return {
      ruleForm: {
        name: '', // 姓名
        expectJob: '', // 期望职位
        gender: '', // 性别
        workingDate: '', // 参加工作日期
        birthday: '', // 生日
        mailbox: '', // 邮箱
        mobile: '', // 电话
        wechatNumber: '', // 微信号
        expectCity: '', // 期望工作城市
        salaryRequirements: '', // 起始薪资要求
        salaryRequirement: '', // 结束薪资要求
        personalAdvantage: '', // 个人优势
        photo: '' // 照片
      },
      arr: [],
      arr1: [],
      choiceGender, // 选择性别
      jobList: [], // 职位详情
      hotcityList: [], // 热门城市
      id: 16,
      digitChange: 0, // 数字变化
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        expectJob: [
          { required: true, message: '期望职位不能为空', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        workingDate: [
          { required: true, message: '参加工作日期不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '生日不能为空', trigger: 'blur' }
        ],
        mailbox: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validatorRmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        wechatNumber: [
          { required: true, message: '微信号不能为空', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        expectCity: [
          { required: true, message: '期望工作城市不能为空', trigger: 'change' }
        ]
      }
    }
  },
  components: {
    AddModule
  },
  computed: {
    // 起始薪资
    salaryRequirements () {
      return this.ruleForm.salaryRequirements
    },
    numberChange () {
      return this.ruleForm.personalAdvantage
    }
  },
  watch: {
    // 起始薪资
    salaryRequirements (val) {
      let endSalary = 0
      // 因为此时的val 是带k的 需要转化一下
      endSalary = parseInt(val)
      let flag = 0
      if (endSalary < 30) {
        // 没有 ＋＝就是不包含自己 则相反
        flag = 1
        endSalary += 1
      } else if (endSalary >= 30 && endSalary < 100) {
        flag = 5
        endSalary += 5
      } else if (endSalary >= 100) {
        flag = 10
        endSalary += 10
      }
      this.ruleForm.salaryRequirement = endSalary + 'k'

      const arr1 = []
      let j = 0
      for (let i = endSalary; i < endSalary + 8; i++) {
        if (i === endSalary) {
          j = i
        }
        j += flag
        arr1.push(j + 'k')
      }
      this.arr1 = arr1
    },
    // 数字变化
    numberChange (val) {
      this.digitChange = val.trim().length
    }
  },
  // 起始薪资变化
  created () {
    const arr = []
    for (let i = 1; i <= 250; i++) {
      if (i > 30 && i < 100) {
        i = i + 4
      } else if (i > 100) {
        i = i + 9
      }
      arr.push(i + 'k')
    }
    this.arr = arr
    // 获取用户数据
    this.getUser()
  },
  mounted () {},
  methods: {
    // 如果当有有ID就是更新数据
    preserve () {
      this.$refs.ruleForm.validate(async (isOK) => {
        if (isOK) {
          if (this.ruleForm.id) {
            this.photo = this.$refs.ImageUpload.fileList[0].url
            await updateUserData({
              ...this.ruleForm,
              id: this.id,
              photo: this.photo
            })
            this.$message.success('修改成成功')
          } else {
            await updateUser(this.ruleForm)
          }
        }
      })
    },
    // 获取用户数据
    async getUser () {
      const { data } = await getUser(this.id)
      // console.log(res)
      this.ruleForm = data
      if (this.ruleForm.photo && this.ruleForm.photo.trim()) {
        this.$refs.ImageUpload.fileList = [
          { url: this.ruleForm.photo, upload: true }
        ]
      }
    },
    // 获取职位详情
    async getJob () {
      const { data } = await getJob()
      this.jobList = data
    },
    // 获取城市
    async getHotcity () {
      const { data } = await getHotcity()
      this.hotcityList = data
    }
  }
}
</script>

<style lang="scss" scoped>
#resume {
  margin: 0 auto;
  width: 100px;
  min-width: 1200px;
}
.line {
  width: 8px;
  margin: 0 17px 0 12px;
}
::v-deep .el-form--label-top .el-form-item__label {
  padding: unset;
}

::v-deep .el-input__inner {
  background-color: #f8f9fa;
}
::v-deep .el-input__inner:hover {
  border: 1px solid;
  border-color: #5dd5c8 !important;
  box-shadow: none;
}
.title {
  color: #12141a;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 33px;
  margin-bottom: 16px;
}
::v-deep .el-textarea__inner {
  height: 160px;
  width: 800px;
  background-color: #f8f9fa;
}
// 小数字的处理
.input-wrap-textarea .suffix-counter {
  bottom: 5px;
  top: auto;
  transform: translateY(0);
}
.input-wrap .suffix-counter {
  border-radius: 5px;
  color: #9fa3b0;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-left: 5px;
  position: absolute;
  right: 370px;
  top: 90%;
  transform: translateY(-50%);
}
</style>
